<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.min.js"></script>
</head>
<body>
<div id="div1">
    <input v-focus1/><!--v-加指令名调用指令-->
    <input v-focus2/>
    <p v-mydir:wqewqe="{myhtml: 'qwewqewqwqwq'}"></p>
    <p v-mydir2:wqewqe="{myhtml: '1111111'}"></p>
</div>
<script>
    //全局自定义指令
    Vue.directive("focus1",{
        //在元素加载到dom时触发，inserted是一个钩子函数
        inserted: function (el) {
            el.focus();
        }
    });

    Vue.directive("mydir",function (el,binding) {
        //自定义指令，直接指向函数或者利用对象调用vue原有钩子函数
        el.innerHTML = binding.value.myhtml;
    });

    new Vue({
        el: "#div1",

        //创建实例内的局部自定义指令
        directives: {
            focus2: {

                //指令值是对象，从而调用原有钩子函数
                inserted: function (el) {
                    el.focus();
                }
            },
            mydir2: function (el,binding) {
                //指令值就是一个函数
                el.innerHTML = binding.value.myhtml;
            }
        }
    })
</script>
</body>
</html>